<template>
	<div class="listswitchingstyle">
		<!-- 标题 -->
		<h2>{{ datas.text }}</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<el-form label-width="80px" :model="datas">
						<div class="title">商品选择</div>
						<div>
							<div class="content">
								<div class="sd-flex sd-flex-wrap">
									<div class="goods-item" v-for="(item, index) in datas.goodsList" :key="index">
										<div class="sd-image sd-flex" style="width: 44px; height: 44px; border-radius: 4px">
											<el-image :src="STATIC_URL + item.image" fit="cover" class="image" />
										</div>
										<div class="goods-delete" @click="deleteItem(index)">
											<SvgIcon name="ele-DeleteFilled"></SvgIcon>
										</div>
									</div>
								</div>
							</div>

							<!-- 上传商品 -->
							<el-button @click="ItemChoiceRef.openDialog()" class="uploadImg" type="primary" plain style="margin-bottom: 10px"
								>点击添加商品</el-button
							>
						</div>
						<div class="title">商品样式</div>
						<el-form-item label="商品风格">
							<el-radio-group v-model="datas.mode">
								<!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
								<el-radio-button :label="1">
									<template #default>
										<span class="icon my-icon icon-shangxiabuju"></span>
									</template>
								</el-radio-button>
								<el-radio-button :label="2">
									<template #default><span class="icon my-icon icon-zuoyoujiegou"></span></template>
								</el-radio-button>
								<el-radio-button :label="3">
									<template #default><span class="icon my-icon icon-zuoyoujiegou"></span></template>
								</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item class="lef" label="商品标题">
							<el-input v-model="datas.goodsFields.title.color">
								<template #prepend>
									<el-color-picker v-model="datas.goodsFields.title.color" />
								</template>
								<template #append>
									<el-checkbox v-model="datas.goodsFields.title.show" />
								</template>
							</el-input>
						</el-form-item>
						<el-form-item class="lef" label="副标题">
							<el-input v-model="datas.goodsFields.subtitle.color">
								<template #prepend>
									<el-color-picker v-model="datas.goodsFields.subtitle.color" />
								</template>
								<template #append>
									<el-checkbox v-model="datas.goodsFields.subtitle.show" />
								</template>
							</el-input>
						</el-form-item>

						<el-form-item class="lef" label="商品价格">
							<el-input v-model="datas.goodsFields.price.color">
								<template #prepend>
									<el-color-picker v-model="datas.goodsFields.price.color" />
								</template>
								<template #append>
									<el-checkbox v-model="datas.goodsFields.price.show" />
								</template>
							</el-input>
						</el-form-item>

						<el-form-item class="lef" label="原价">
							<el-input v-model="datas.goodsFields.original_price.color">
								<template #prepend>
									<el-color-picker v-model="datas.goodsFields.original_price.color" />
								</template>
								<template #append>
									<el-checkbox v-model="datas.goodsFields.original_price.show" />
								</template>
							</el-input>
						</el-form-item>

						<el-form-item class="lef" label="销量">
							<el-input v-model="datas.goodsFields.sales.color">
								<template #prepend>
									<el-color-picker v-model="datas.goodsFields.original_price.color" />
								</template>
								<template #append>
									<el-checkbox v-model="datas.goodsFields.original_price.show" />
								</template>
							</el-input>
						</el-form-item>

						<el-form-item class="lef" label="库存">
							<el-input v-model="datas.goodsFields.stock.color">
								<template #prepend>
									<el-color-picker v-model="datas.goodsFields.stock.color" />
								</template>
								<template #append>
									<el-checkbox v-model="datas.goodsFields.stock.show" />
								</template>
							</el-input>
						</el-form-item>

						<div class="title">商品角标</div>
						<el-form-item label="角标选择">
							<el-radio-group v-model="datas.tagStyle.show">
								<el-radio :label="0">不显示</el-radio>
								<el-radio :label="1">显示</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="上传图片" v-if="datas.tagStyle.show == 1">
							<div class="choice-image choice-image-delete" @click="openImageDialog(1)">
								<el-image v-if="datas.tagStyle.src != ''" :src="STATIC_URL + datas.tagStyle.src" fit="contain" />
								<el-icon v-else>
									<Plus />
								</el-icon>
								<div class="delete-content" @click.stop="datas.tagStyle.src = ''" v-if="datas.tagStyle.src != ''">
									<SvgIcon name="ele-DeleteFilled"></SvgIcon>
								</div>
							</div>
						</el-form-item>
						<div class="title">加购设置</div>
						<el-form-item label="加购按钮">
							<el-radio-group v-model="datas.buyNowStyle.mode">
								<el-radio :label="1">文字</el-radio>
								<el-radio :label="2">图片</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="图片" v-if="datas.buyNowStyle.mode == 2">
							<div class="choice-image choice-image-delete" @click="openImageDialog(0)">
								<el-image v-if="datas.buyNowStyle.src != ''" :src="STATIC_URL + datas.buyNowStyle.src" fit="contain" />
								<el-icon v-else>
									<ele-Plus />
								</el-icon>

								<div class="delete-content" @click.stop="datas.buyNowStyle.src = ''" v-if="datas.buyNowStyle.src != ''">
									<SvgIcon name="ele-DeleteFilled"></SvgIcon>
								</div>
							</div>
						</el-form-item>

						<div class="mb20" v-if="datas.buyNowStyle.mode == 1">
							<el-form-item label="文字">
								<el-input v-model="datas.buyNowStyle.text" />
							</el-form-item>
							<el-form-item label="背景1">
								<el-input v-model="datas.buyNowStyle.color1">
									<template #prepend>
										<el-color-picker v-model="datas.buyNowStyle.color1" />
									</template>
								</el-input>
							</el-form-item>
							<el-form-item label="背景2">
								<el-input v-model="datas.buyNowStyle.color2">
									<template #prepend>
										<el-color-picker v-model="datas.buyNowStyle.color2" />
									</template>
								</el-input>
							</el-form-item>
						</div>

						<div class="title">样式</div>
						<el-form-item label="上圆角">
							<div class="flex">
								<el-slider class="ml20" v-model="datas.borderRadiusTop" />
								<el-input class="ml20" v-model="datas.borderRadiusTop"></el-input>
							</div>
						</el-form-item>
						<el-form-item label="下圆角">
							<div class="flex">
								<el-slider class="ml20" v-model="datas.borderRadiusBottom" />
								<el-input class="ml20" v-model="datas.borderRadiusBottom"></el-input>
							</div>
						</el-form-item>
						<el-form-item label="间距">
							<div class="flex">
								<el-slider class="ml20" v-model="datas.space" />
								<el-input class="ml20" v-model="datas.space"></el-input>
							</div>
						</el-form-item>
					</el-form>
				</div>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>

		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>

		<ItemChoice ref="ItemChoiceRef" @choice="choiceItem"></ItemChoice>
	</div>
</template>

<script setup name="goodsCardstyle">
import { defineAsyncComponent, reactive, ref } from 'vue';
import vuedraggable from 'vuedraggable'; //拖拽组件
import { STATIC_URL } from '/@/utils/config';
import { Plus } from '@element-plus/icons-vue';
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const ItemChoice = defineAsyncComponent(() => import('/@/views/goods/goods/choice/index.vue'));
const FileChoiceRef = ref();
const ItemChoiceRef = ref();
const props = defineProps({
	datas: {},
});

const state = reactive({
	commodityTypes: [
		{
			icon: 'icon-datumoshi',
			type: 1,
			content: '大图模式',
		},
		{
			icon: 'icon-commodity-yihangliangge',
			type: 2,
			content: '一行两个',
		},
		{
			icon: 'icon-commodity-xiangxiliebiao',
			type: 3,
			content: '详细列表',
		},
	],

	marker: ['新品', '热卖', 'NEW', 'HOT'],
	imgText: null, //当前选中的类型
	imgNumber: null, //第几个数组
	predefineColors: [
		// 颜色选择器预设
		'#ff4500',
		'#ff8c00',
		'#ffd700',
		'#90ee90',
		'#00ced1',
		'#1e90ff',
		'#c71585',
		'#409EFF',
		'#909399',
		'#C0C4CC',
		'rgba(255, 69, 0, 0.68)',
		'rgb(255, 120, 0)',
		'hsv(51, 100, 98)',
		'hsva(120, 40, 94, 0.5)',
		'hsl(181, 100%, 37%)',
		'hsla(209, 100%, 56%, 0.73)',
		'#c7158577',
	],
	options: [], // 更多跳转链接
	moreName: null,
	tagPosition: [
		// 标记位置
		'左上',
		'左下',
		'右上',
		'右下',
	],
	uploadImgDataType: 0, // 上传图片类型 0: 角标, 1: 加购按钮图片
});

const openImageDialog = (type) => {
	state.uploadImgDataType = type;
	FileChoiceRef.value.openFileChoiceDialog();
};

const choiceFile = (res) => {
	if (state.uploadImgDataType === 1) {
		// 角标
		props.datas.tagStyle.src = res[0].visitRelativePath;
	} else {
		props.datas.buyNowStyle.src = res[0].visitRelativePath;
	}
};

const choiceItem = (res) => {
	console.log('item: ', res);
	res.forEach((element) => {
		props.datas.goodsList.push(element);
	});
};

const deleteItem = (index) => {
	props.datas.goodsList.splice(index, 1);
};
</script>

<style scoped lang="scss">
.listswitchingstyle {
	width: 100%;
	// position: absolute;
	// left: 0;
	// top: 0;
	padding: 0 10px 20px;
	box-sizing: border-box;

	/* 标题 */
	h2 {
		padding: 24px 16px 24px 0;
		margin-bottom: 15px;
		border-bottom: 1px solid #f2f4f6;
		font-size: 18px;
		font-weight: 600;
		color: #323233;
	}

	.lef {
		:deep(.el-form-item__label) {
			text-align: left;
		}
	}

	.shop-head-pic {
		color: #ababab;
		display: flex;
		flex-direction: column;
		.home-bg {
			width: 100px;
			height: 100px;
			margin: 10px auto;
		}
		.shop-head-pic-btn {
			display: flex;
			flex-direction: row;
			.el-button {
				flex: 1;
			}
		}
	}
	/* 列表样式 */
	.commodityType {
		display: flex;
		justify-content: space-around;
		align-items: center;
		span {
			display: inline-block;
			width: 58px;
			height: 32px;
			text-align: center;
			line-height: 32px;
			background: #fff;
			border: 1px solid #ebedf0;
			color: #979797;
			margin: 0 1px;
			cursor: pointer;
			transition: all 0.5s;

			&:hover {
				border: 1px solid #155bd4;
				color: #155bd4;
			}

			&.active {
				border: 1px solid #155bd4;
				background-color: #e0edff;
				color: #155bd4;
			}
		}
	}

	/* 商品样式 */
	.moditystyle {
		font-size: 12px;
		width: 100%;
		display: flex;
		span {
			width: 86px;
			height: 32px;
			display: inline-block;
			text-align: center;
			line-height: 32px;
			cursor: pointer;
			border: 1px solid #ebedf0;
			&.active {
				border: 1px solid #155bd4;
				background-color: #e0edff;
				color: #155bd4;
			}
		}
	}

	/* 位置 */
	.weiz {
		text-align: right;
		i {
			padding: 5px 14px;
			margin-left: 10px;
			border-radius: 0;
			border: 1px solid #ebedf0;
			font-size: 20px;
			font-weight: 500;
			cursor: pointer;

			&:last-child {
				font-size: 22px;
			}

			&.active {
				color: #155bd4;
				border: 1px solid #155bd4;
				background: #e0edff;
			}
		}
	}

	/* 单选框 */
	:deep(.radi1) {
		border-top: 1px solid #f7f8fa;
		border-bottom: 1px solid #f7f8fa;
		padding: 12px 0;
		.el-radio {
			margin: 10px 25px 7px 0;
		}
	}

	.uploadImg {
		width: 100%;
		height: 40px;
		margin-top: 20px;
	}
	.tag {
		/* 图片 */
		display: flex;
		justify-content: space-around;
		align-items: center;
		.imag {
			width: 60px;
			height: 60px;
			border-radius: 5px;
			cursor: pointer;
			border: 1px dashed var(--el-border-color-darker);
			display: flex;
			justify-content: center;
			align-items: center;
			img {
				width: 100%;
				height: 100%;
				display: inline-block;
			}
		}
	}
	/* 商品列表 */
	.imgBanner {
		padding: 6px 12px;
		margin: 16px 7px;
		border-radius: 2px;
		background-color: #fff;
		box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
		display: flex;
		position: relative;

		/* 删除图标 */
		.el-icon-circle-close {
			position: absolute;
			right: -8px;
			top: -10px;
			cursor: pointer;
			font-size: 19px;
		}

		/* 图片 */
		.imag {
			width: 60px;
			height: 60px;
			border-radius: 5px;
			overflow: hidden;
			position: relative;
			cursor: pointer;
			img {
				width: 100%;
				height: 100%;
				display: inline-block;
			}
			span {
				background: rgba(0, 0, 0, 0.5);
				font-size: 12px;
				position: absolute;
				left: 0px;
				bottom: 0px;
				display: inline-block;
				width: 100%;
				text-align: center;
				color: #fff;
				height: 20px;
				line-height: 20px;
			}
		}

		/* 图片字 */
		.imgText {
			width: 80%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding-left: 20px;
			justify-content: space-between;
		}
	}

	/* 上传图片按钮 */
	.uploadImg {
		width: 100%;
		height: 40px;
		margin-top: 20px;
	}

	// 上传弹框内容部分
	:deep(.uploadIMG) .el-dialog__body {
		height: 280px;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		justify-content: center;
	}

	.disable {
		:deep(.el-upload) {
			display: none !important;
		}
	}

	.tit {
		margin-bottom: 20px;
		:deep(.el-input__inner) {
			text-align: center;
		}
	}
}

.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}

	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

:deep(.el-input-group__prepend) {
	padding: 0px !important;
}

:deep(.el-color-picker__trigger) {
	padding: 0px;
}

:deep(.el-color-picker__color) {
	border: 0px;
}
</style>
